<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://wattdepot-gdata.googlecode.com/svn/trunk/javascript/ajile/com.iskitz.ajile.js?mvcoff,mvcshareoff,refresh"></script>
<script type="text/javascript" src="http://wattdepot-gdata.googlecode.com/svn/trunk/javascript/org.wattdepot.gdata.GDataLoader.js"></script>
<script type="text/javascript" src="http://wattdepot-gdata.googlecode.com/svn/trunk/javascript/org.wattdepot.gdata.kukuicup.Timestamp.js"></script>
 
<script type="text/javascript">
// Wrap this code in an anonymous self-invoking function to avoid polluting global namespace.
(function() {
  // A spreadsheet containing sparkosummary data.
  var spreadsheetURL = 'http://spreadsheets.google.com/tq?key=0An9ynmXUoikYdHdqMXVEckp5eWFwXzdSNjJMa2JvNUE&range=A1:F27&gid=0';
  // How frequently we want this spreadsheet data to be refreshed in the visualization.
  var refreshInterval = 30; 
  // Load the visualization API and the spreadsheet data, then call displayDormData.
  var loader = new org.wattdepot.gdata.GDataLoader(spreadsheetURL, refreshInterval, displayDormData);  
      
  function displayDormData(datatable) {
    displaySpark(datatable, [2], 0, 5, 'lastHr_div', '#00cc00');
    displaySpark(datatable, [3], 0, 23, 'lastDay_div', '#00cc00');
    displaySpark(datatable, [4], 0, 6, 'lastWk_div', '#FF0000');
  }

  function displaySpark(datatable, columns, startRow, endRow, divName, colorName) {
    var view = new google.visualization.DataView(datatable);
    view.setColumns(columns);
    view.setRows(startRow, endRow);
    var chart = new google.visualization.ImageSparkLine(document.getElementById(divName));
    chart.draw(view, {color: colorName, width: 150, height: 10, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
  }
})();
</script>

<style type="text/css">
  .sparkostatus-global {font-family:Verdana,Arial,sans-serif}
  .sparkostatus-div {width:150px;text-align:center}
</style>
</head>

<body>
  <div class="sparkostatus-global"  id="chartdiv">
  <div id="dormName" class="sparkostatus-div" style='font-size: 0.8em; font-weight: bold; font-variant: small-caps'>Lehua</div>
  <div id="current" class="sparkostatus-div" style='color: #00cc00; font-size: 1.5em; font-weight: bold;'>1587 kW</div>
  <div id="lastHr_div"></div>
  <div id="lastDay_div"></div>
  <div id="lastWk_div"></div>
  <div id="lastUpdate" class="sparkostatus-div" style='font-size: 0.7em'>Updated: 6/25/10 9:43am</div>
</div>
</body>
</html>


